<template>
  <BasicTitle :class="prefixCls" :helpMessage="helpMessage" :span="true" v-if="getTitle">
    {{ getTitle }}
  </BasicTitle>
</template>
<script lang="ts" setup>
  import { computed, PropType } from 'vue';
  import { BasicTitle } from '@/components/Basic';
  import { VxeGridInstance } from '@/components/VxeTable';
  import { useDesign } from '@/hooks/web/useDesign';
  import { isFunction } from '@/utils/is';

  defineOptions({ name: 'AdVxeTableTitle' });

  const props = defineProps({
    /** 表格标题 */
    title: {
      type: [Function, String] as PropType<string | ((data: Recordable) => string)>,
    },
    /** 表格标题右侧提示信息 */
    helpMessage: {
      type: [String, Array] as PropType<string | string[]>,
    },
    /** 获取表格对象函数 */
    getTableFn: {
      type: Function as PropType<() => VxeGridInstance | undefined>,
      required: true,
    },
  });

  const { prefixCls } = useDesign('ad-vxe-table-title');

  const getTitle = computed(() => {
    const { title, getTableFn } = props;
    let tit = title;

    if (isFunction(title)) {
      tit = title({
        table: getTableFn(),
      });
    }
    return tit;
  });
</script>
<style lang="less">
  @prefix-cls: ~'@{namespace}-ad-vxe-table-title';

  .@{prefix-cls} {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
</style>
